<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">消息详情</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <view class="title">{{ messageData.title }}</view>
      <view class="t2 flex">
        <image
          class="times_img"
          :src="`${store.imgDomain}order_1.png`"
          mode="scaleToFill"
        />
        <text>{{ messageData.create_at }}</text></view
      >
      <view class="view_p" v-html="messageData.content"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import tabBar from '@/components/tabBar.vue';
import SearchInput from '@/components/SearchInput.vue';

const searchResult = ref('');
const store = useCounterStore();
const messageData = ref({});

onLoad(() => {
  messageData.value = { ...store.messageData };
  store.messageData = {};
});
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #f8f8f8;
}
.topbars {
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 30rpx;
  position: relative;
  .title {
    font-size: 36rpx;
    font-weight: 700;
  }
}

.t2 {
  margin-top: 20rpx;
  .times_img {
    width: 28rpx;
    height: 29rpx;
    margin-right: 10rpx;
  }
  text {
    color: $uni-text-color-grey;
  }
}
.view_p {
  margin: 30rpx 0;
}
</style>
